<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件</title>
    <script src="../libs/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>  {{title }} </h2>
        <h2>msg == {{msg }}</h2>
        <m-head></m-head>
        <parent
            id="2116"
            :msg="msg"
        ></parent>
    </div>

    <template id="parent">
        <div>
            <h2>Parent - Parent - Parent </h2>
            <h2>id -- {{id}}</h2>
            <h4>msg -- {{msg}} </h4>
            <hr>
            <childone
                count="1314"
                :word="word"
                :city="city"
                :address="address"
                :area="area"
            ></childone>
            <hr>
            <childtwo
                prop-a="2116-今天看电影"
                prop-b="pb"
                :prop-c="pc"
                :prop-d="pd"
            ></childtwo>
        </div>
    </template>
    <template id="childone">
        <div>
            <h2> childone - childone - 组件1 </h2>
            <h2>
                word --- {{word}}
            </h2>
            <h2>city -- {{city }}</h2>
            <h2>area -- {{area }}</h2>
            <h2>address -- {{address }}</h2>

        </div>
    </template>
    <template id="childtwo">
        <div>
            <h2> childtwo - childtwo - 组件2 </h2>
            <h2>
                props -- {{propA}} - {{propB}} - {{propC}} - {{propD}}
            </h2>
        </div>
    </template>
    <script>
        // 全局注册
        Vue.component("mHead",{
            template:"<header>Head - Head - wh2116daydayup </header>"
        })

        Vue.component("parent",{
            template:"#parent",
            props:['id','msg'],   // 接受父组件的props 
            data(){
                return {
                    word:"Are you Ok",
                    city:"武汉市",
                    area:'',
                    address:"金融港B18栋3楼",
                    pc:"三阶段的技巧就是多写代码 ",
                    pd:2116520
                }
            },
            components:{
                childone:{
                    template:"#childone",
                    props:{
                        word:String ,
                        city:[String,Number],
                        area:{
                            type:String,
                            default:"北京朝阳区",
                            required:true   // 必传 
                        },
                        address:{
                            type:[Number,String],
                            default(){
                                return "千锋北京教育"
                            }
                        }
                    }
                }
            }
        })

        Vue.component("childtwo",{
            template:"#childtwo",
            props:{
                propA:[String,Number],
                propB:{
                    type:String 
                },
                propC:{
                    type:String  
                },
                propD:{
                    type:Number,
                    default:1314 
                }
            }
        })

        const vm = new Vue({
            // el:"#app",
            components:{
            },
            data:{
                title:"Vue 组件初步 (组件通信 - props ) ",
                msg:"小型、独立和通常可复用的组件构建大型应用"
            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title 
            }
        }).$mount("#app")
    </script>

    <!-- 
        <A>
            <B></B>
        </A>
        props  组件接受的外部数据  

        通过 Prop 向子组件传递数据  单向数据流   

        props 属性   用来传递(父组件传给子组件)组件的参数 (动态&静态)   v-bind
        props 只能用来传递数据  不可以修改   
        动态props v-bind 
        静态props 没有 v-bind 

        props 驼峰命名   user-name="zuozuomu"

        props 校验  格式类型
        String    
        Number
        Boolean
        Array
        Object
        Date
        Function
        Symbol  符号
     -->
</body>
</html>